#blob css

[divinector]

CSS Animated Blob

[themightyloser]

I like how I find it more enjoyable to do web development instead of drawing now

like, how, programming shouldn't be this fun

[technicontrastron]

hiii I love ur neocites 🎶 the stones r so soft & pretty 🥺 I'm building one rn & hope it can look as nice as urs 💙

Thank youuuuuuuuu <3 I was going for a sea glass kind of look in pure CSS (+ one texture i made myself) ^.^!

this one was very helpful too, border radius blob generator

have a lot of fun with yours!

[positronx]

Hello everyone! Today we will walk you through a compilation of the best CSS blob effects. In this post, you will explore creative and captivating blob animation effects that transform your web designs into captivating visual masterpieces through unique and creatively animated shapes. No matter if you are looking to add a sense of fascination […]

[black7375]

Knuth-Plass 줄바꿈 알고리즘

https://tex.stackexchange.com/questions/230668/any-progress-on-knuth-plass-algorithm

https://bugzilla.mozilla.org/show_bug.cgi?id=630181

https://defoe.sourceforge.net/folio/knuth-plass.html

https://elliotjaystocks.com/blog/justification-hyphenation/

https://github.com/jaroslov/knuth-plass-thoughts/blob/master/plass.md

https://mpetroff.net/2020/05/pre-calculated-line-breaks-for-html-css/

https://github.com/robertknight/tex-linebreak

https://github.com/bramstein/typeset

[cssmonster]

Explore 15+ Interactive CSS Bubbles for Your Web Projects

Dive into our refreshed compilation of carefully selected HTML and CSS bubble code examples. This comprehensive resource features a diverse range of bubbles from renowned platforms like CodePen, GitHub, and more. With our September 2023 update, we're thrilled to present eight new bubble designs that embody the latest web design trends and innovations. Whether you're a web developer seeking inspiration or a designer in search of ready-to-use bubble code snippets, this article has you covered. Incorporate these CSS bubbles into your website to infuse interactivity and playfulness, delivering a delightful user experience. Join us on this exploration of the world of CSS bubbles, where creativity seamlessly combines with functionality and design to elevate your projects. Related Articles: - Explore 24 Dynamic CSS Blob Effects

Author Rahul Goswami July 8, 2023 Links Demo and Code Download Made with HTML / CSS About a Code CSS Bubble Effect Immerse your web projects in the captivating world of a singular CSS bubble effect. Explore creative possibilities to add interactivity and playfulness, enhancing the user experience with this delightful design detail. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author theUnnamedRd September 24, 2021 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code CSS Bubble Dive into the world of a singular CSS bubble. Explore creative ways to add interactivity and playfulness, enhancing your web design with this delightful detail. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Diyorbek Olimov August 21, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Bubble Background Animation Transform your web design with a captivating singular detail—an animated bubble background. Dive into this creative element to add interactivity and a playful touch, enhancing the user experience with delightful visual effects. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Trevor Knutson June 16, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Creative CSS Bubble Dive into the world of a singular CSS bubble—a delightful design detail that adds interactivity and playfulness to your web projects. Explore creative possibilities and enhance the user experience effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Pratham May 7, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Dropmorphism UI Dive into the world of Dropmorphism UI design, a singular detail that brings a sleek and modern touch to your web projects. Explore the creative potential of this unique design element to enhance your user interface with style and elegance. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Jon Kantner February 12, 2021 Links Demo and Code Download Made with HTML (Pug) / CSS About a Code Bubble Wrap Checkbox Effect Experience the creativity of a singular detail—a functional cluster of checkboxes designed to resemble a sheet of bubble wrap. This unique effect utilizes an input element for the initial state and a span element to replace it for the "popped" state. Explore this playful design detail to enhance user interaction and engagement in your web projects. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Jelilicent January 10, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Jelly Bubble CSS Effect Dive into the mesmerizing world of a singular jelly bubble CSS effect. Explore creative ways to add this playful design detail to your web projects, infusing them with interactivity and a delightful user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Jon Kantner October 23, 2020 Links Demo and Code Download Made with HTML / CSS About a Code Toggle Bubble Button Dive into the world of the toggle bubble—a unique button design resembling a bubble with a dynamic donut that transforms into "0" or "1." Explore how this singular detail can add interactive charm to your web projects, providing an engaging user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Wendy Kong June 13, 2020 Links Demo and Code Download Made with HTML / CSS About a Code Breathing Exercise with Bunny & Bubbles Engage in a unique breathing exercise with a bunny-themed toggle button. This interactive design detail features a bubble that transforms into a "0" or "1" donut, offering a playful and mindful experience to boost your well-being. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Melanie Hoek June 9, 2020 Links Demo and Code Download Made with HTML (Pug) / CSS (SCSS) About a Code CSS Bubbling Experiment Dive into an intriguing singular CSS bubbling experiment, exploring creative ways to add interactivity and dynamic effects to your web projects. Discover the magic of this unique design detail for an engaging user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author MenSeb April 25, 2019 Links Demo and Code Download Made with HTML (Pug) / CSS (SCSS) About a Code CSS Bubble Sort Dive into a unique CSS experience with a singular bubble sort implementation, created entirely with SCSS. Explore this example, featuring functions, mixins, animations, and pseudo-elements, to enhance your web design with a dynamic and interactive element. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author LoFi April 3, 2019 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code Squishy CSS Bubble Dive into the whimsical world of a singular squishy CSS bubble effect. Discover creative ways to incorporate this playful design detail into your web projects, adding a touch of interactivity and delight to the user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Marko November 5, 2018 Links Demo and Code Download Made with HTML (Haml) / CSS (SCSS) About a Code Random CSS Bubble Background Create an engaging singular design detail with a random CSS bubble background. Explore this creative addition to infuse your web projects with dynamic visuals and a touch of playfulness, enhancing the user experience effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Emily Goldfein April 25, 2017 Links Demo and Code Download Made with HTML / CSS About a Code Submarine & Bubble CSS Effect Dive deep into web design creativity with a singular submarine and bubble CSS effect. Explore the magic of this unique design detail, infusing your projects with interactivity and underwater charm for an engaging user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Emily Goldfein April 25, 2017 Links Demo and Code Download Made with HTML (Haml) / CSS (Stylus) About a Code Random Moving Bubble Effect Explore a simple yet captivating singular detail—a random moving bubble effect that mimics the playful motion of soda bubbles. Incorporate this creative snippet into your web design to add an engaging and dynamic touch to your website effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Felix Hornoiu October 23, 2014 Links Demo and Code Download Made with HTML / CSS About a Code Bubble Trouble CSS Effect Dive into the captivating world of a singular CSS effect known as "Bubble Trouble." Explore how this creative detail adds a touch of interactivity and playfulness to your web design, creating a delightful user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Kévin Chassagne August 28, 2014 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code CSS3 Bubble Effect Dive into the world of a singular CSS3 bubble effect, adding interactivity and playful design elements to your web projects. Explore the creative potential of this delightful detail for an enhanced user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Avaz Bokiev August 7, 2012 Links Demo and Code Download Made with HTML / CSS About a Code Pure CSS Animated Bubble and Mac Dive into the world of a singular animated bubble and Mac effect created entirely with CSS. Explore the creativity and innovation behind this unique design detail for a captivating web experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Read the full article

[pulipuli]

看看網頁版全文 ⇨ 用Docker建置具備HTTPS的NGINX反向代理伺服器：docker-HTTPS-Reverse-Proxy / Build a NGINX Reverse Proxy with HTTPS in Docker: docker-HTTPS-Reverse-Proxy https://blog.pulipuli.info/2023/04/blog-post_10.html 直接設定NGINX實在是太複雜了，那我們用Docker把複雜的內容都包裝起來，只追求最簡單的設定即可。 ---- # docker-HTTPS-Reverse-Proxy。 https://github.com/pulipulichen/docker-HTTPS-Reverse-Proxy。 docker-HTTPS-Reverse-Proxy是我為了將NGINX建置成理想的反向代理伺服器所開發的專案。 其主要的特點有：。 - 反向代理伺服器 (reverse proxy)：在後端伺服器(backend)前面架設一層緩衝伺服器使用。 - 負載平衡 (loaidng balancing)：如果設定多個後端伺服器，則流量會自動分配給它們使用。 - 自動快取與壓縮：大部分靜態資源，例如JavaScript、CSS、圖片、聲音與影片，都會被自動快取和壓縮。 - 隱藏伺服器資訊：Server、X-Powered-By等標頭會被自動移除。錯誤訊息的網頁也被簡化，讓人完全看不出這是什麼伺服器。 - 流量限制：避免DDoS攻擊。 - SSL憑證：分析後端伺服器的設定，使用certbot申請憑證並且安裝，每30天進行更新，一切全自動。 - 虛擬主機：根據域名判斷後端伺服器。 # 環境 / Environment docker-HTTPS-Reverse-Proxy是以Docker為主。 下載檔案需要用到git。 部分腳本使用了只能在Linux運作的bash。 最難克服的應該只有Docker引擎的部分。 關於Docker的安裝，請看Install Docker Engine。 除了Docker引擎之外，還需要安裝docker-compose，詳細請看「Install the Compose standalone」。 # 使用方法 / Usage 首先我們要將docker-HTTPS-Reverse-Proxy用git複製到本地端：。 [Code...] 再來是複製./conf/backends.sample.yml為./conf/backends.yml，然後修改它。 [Code...] https://github.com/pulipulichen/docker-HTTPS-Reverse-Proxy/blob/main/conf/backends.sample.yml。 backends.yml是以YAML的格式撰寫。 ---- 繼續閱讀 ⇨ 用Docker建置具備HTTPS的NGINX反向代理伺服器：docker-HTTPS-Reverse-Proxy / Build a NGINX Reverse Proxy with HTTPS in Docker: docker-HTTPS-Reverse-Proxy https://blog.pulipuli.info/2023/04/blog-post_10.html

[irradiate-space]

Electron?

Apart from Electron:

As long as the app is read-only referencing local _assets_ using relative links, you should be able to link to stuff like images and CSS and JS, from a page loaded over file:///. You can't write to disk, but there shouldn't be anything preventing you from pulling stuff from locations like "./data/characters/bob.json"

If you need persistent storage of custom data that's what the window.localStorage or IndexedDB APIs are for - as long as the only edit interface allowed is your webpage. Do what Lancer does and have a button that lets users export state, and then import it by uploading the state file. JSON, yay!

You could also take the TiddlyWiki approach and simply inline all your assets into blobs on the page. If you're doing this, I recommend not doing it by hand. Find a bundler to do it for you. Still can't write to the page.

Alright, Google is zero help with this (every variant of what I'm asking for just floods me with SEO-optimized results for exactly the opposite of what I'm looking for), so...

In my day job, I'm a web developer, mainly. I've got a good deal of experience working with HTML/CSS/JS for front-end UI development, so when I decided to build a content management system for my game project- which is going to be a bunch of pages and menus and buttons and selectors and stuff- it seemed like a natural choice to just build it as a web app, using those skills I already have. It wouldn't be hosted anywhere- the idea would be to just load index.html on localhost and work from a local browser window offline- but I figured I could prototype it pretty quickly with good old-fashioned divs and CSS.

Eeeeexcept I can't do that, actually. The purpose of the app is to manage a directory full of a bunch of structured custom content files- maps, units, sprites, yada yada yada, and lots of small individual changes will happen to a lot of different file resources. Browsers are bad for this, because they rightly have a lot of security protections against webpages accessing the user's filesystem. While I thought the File System API would just let me prompt the user for access to the content folder, and then just work with those files freely from there, that... is apparently a very experimental feature that Firefox doesn't support yet. Seems like a bad choice of thing to rest the entire functionality of the app on.

So what I'm looking for is... is there a framework somewhere for building desktop apps (so I can access local files easily) that uses HTML/CSS/JS for front-end UI development? Something like a browser that's not a browser and doesn't have those inherent security protections to get around?

[codenewbies]

CSS only Blob Animation Learn more from codenewbies YouTube channel

[mournstera]

Creating Tumblr themes: Websites or tools you might not have heard of

There are several posts and pages on how to create Tumblr themes. I figured I'd add some links and tools that I haven't really seen on this hellsite. Enjoy!

Chrome Devtools — This is an obvious one to point out to some, but I don't wanna leave it out. Right click and inspect on a website! "live edit" your CSS and HTML and watch it take action immediately. Just remember to copy the html/CSS into your theme before refreshing ;) I've used similar tools on Firefox since 2010, never looked back. devtools is powerful as fuck, but you don't need to know everything before diving into it.

Prettier.io — "An opinionated code formatter." Use the online playground to check your scripts or neatly fix and arrange your CSS. Or just HTML. It can also be installed in VS Code easily, which I highly recommend.

Coolors.co — colour patterns, gradients, create colour schemes from images, check for accessibility, and so much more.

Lucide Icons — the popular Feather icons just got an upgrade, so many Icons! Go here to see how to integrate it in your themes.

Neumorphism.io — What it says on the tin.

uiverse.io — Universe of UI elements to help you stand out. Great source of inspiration as well.

Fancy Border Radius Generator — Because why settle with squares?

Blob generator — if fancy Border radius isn't enough. Generator of much more than blobs, by the way! Check it out.

Open Props: Sub-atomic styles — Supercharged CSS variables.

Modern CSS Reset — better than Eric Meyer's.

Subtle patterns — been using this for over a decade.

CodeMyUI — repository for CSS snippets.

Codepad — a place for developers to share code snippets: PHP, Java, Bash, C, C++, Python and more.

Mesh Gradient Collection — because it's pretty.

WAVE — Check how your website/theme holds up accessibility-wise. Spoiler alert: get into aria-labels.

Feel free to message me more, and I'll add it to the post.

[code-es]

Codeblr tag game - realization

@a-fox-studies thank you for tagging me in this!!

At what point in your life did you decide that the world of computers was the one for you?

Heh this is a long one... So read if u want to know some code-es lore :p

But tldr: My dad was a software/computer engineer and his dedication and working spirit is my biggest inspiration, but programming was never a passion of mine - languages were my big thing. This was until I took a programming course and realized that programming is just like learning languages, but with rules that actually apply.

I want to tag: @xiacodes @web-dev-with-bea @compooter-blob @alica-tech @lazar-codes @zoeythebee @cloudycodes @04kid

Programming was always around me when i was younger. My father was a software systems engineer, so when i was a kid i would see him work on matrix looking code, and sometimes he'd even let me press buttons!

But i wasn't really interested in learning anything about computers... I was instead interested in art and especially languages, which was my biggest interest and passion. Then my dad passed away, and following that I'd get more and more interested in programming during my teens, partly to honor him and my family, because on my dad's side almost everyone's a software engineer. I also had an email friend I met on omegle when i was 14-15, and he was 30 something, which... now that i think of it, it was probably pretty a little weird that he wanted to be my friend... but anyways, he was a software engineer and explained what coding/programming was and following that I made my first webpage using only HTML and CSS, in my notepad hahaha!!

But... I didn't do much after that, until I was in my second last year of high school. I signed up to take a programming course for my next and final year. I've always been curious, and wanted all the knowledge I could get, so when a programming course was offered I had to take it! But it was just another small drop in my big lake of interests.

I don't think I realized that computers and programming was what I wanted to do until I visited my family in Mexico 2 years ago, weeks before starting that programming course. For some reason I always saw programming and computers as something out of my reach - i couldn't possibly learn this. However, to prove me wrong, my cousin, who studied software development at the time, showed me his projects, and what he was doing. And, I realized that omg - I could also be doing this? It's within reach!

And then I started learning python in school and I was kind of discouraged, it was so difficult! Most people had previous experience, and seeing what they could already do I felt overwhelmed, thinking I should also be doing that. But I kept coming back to the thought that this is just like learning a language: if I just expose myself to more and more content it will start making sense, and sooner or later I'll be able to form my own sentences and the computer will listen to me.

I've always loved the logic of languages, how the syntax is built, and how verbs are conjugated in accordance to gender, numerus and time in different languages. But... there are always exepctions and irregularities you just have to learn. However, programming is all logic, everything has an explanation, even the seemingly inexplicable concepts. There is always a solution, and my creativity is the limit, and that is what keeps me going.

And then! I was looking at university educations to apply for, when on a whim I found out about my current school, checked what courses they offer and saw something about frontend development. I read the description, and realized that oh my god - this is my type of programming! I get to do design and art AND code? And since studying here, I have realized that, yeah, this is exactly my field, and I love computers and I just want to learn more and more and more, always, and there are so many rabbit holes to fall into within programming.

During my time in school, I would envision myself working with something static in the future; like just going to uni, learning a job, and then doing it. Then, I remember being on studyblr, and seeing the quote "now is the only time in your life when your full time job is to learn" and I took it to heart, and that is what kept me motivated - I thought, what a privilege to just learn for a living. And that is exactly what working with software will be (:

My biggest weakness is finishing writing shit lol, my feedback in on essays was always: ok great, but dont have 3 different points where we think its gonna end but we're met with yet another finishing paragraph. So I'll just end it quickly here, thank you for reading!

[themekets]

Customizable Audio Player

There's probably at least a few of these kicking about nowadays, but so far none of them have suited mine or my wife's purposes well enough.

So here we are, I made my own.

Github Link

Follow the instructions in the readme to get started. I'll be keeping the links in there up to date as I make any necessary changes, so refer to that for up to date information.

The player consists of a couple of pieces:

HTML code for the player's visual elements on the page and the audio playlist.

Javascript for the player's operation.

CSS code for the player visuals, with some provision for simplified adjustments to fit whatever theme you need.

Because the player essentially just becomes part of your Tumblr theme itself, you have full control over how it looks. I've given it some base styling to make it usable as-is, but if you want to completely change how it looks, where it goes, that's entirely up to you.

If you have specific needs that are't met with this implementation, feel free to file a Github issue or just send me an ask. I'm much more active on Github than I am here, though, so those will tend to get seen more quickly.

If you want to submit your own custom themes for the player for others to use, that's where I'd ask you submit them to as well, please!

Of course, you're more than free to send asks if you run into any difficulty using it.

[lemon-boy-stan]

mirror room - e.h

evan and his girlfriend are dragged along by zoe, alanna and jared to an escape room course that has a theme of optical illusions. there are four rooms and three hours. each room has it's own task that will eventually lead to the occupants' escape. if you do not solve the task you will "blow up". amidst jared and the clock's pressure, supposedly neuro-typical y/n suffers from what she's normally calming her boyfriend down from.

tw: anxiety attack. pressure. mentions of distortion.

Y/N

we were supposed to go on a date but it's alana's birthday tomorrow so i guess that alana gets what she wants.

evan didn't seen too disappointed about our date's cancellation.

thankfully, he didn't appear to look relieved about it either.

he just seemed... worried. but then again, evan had anxiety.

so him being worried about our date having been cancelled wasn't worrying enough for me to text his mum in secret.

we'd even made it to the fourth room without anything distantly related to anxiety occuring.

even with all of the distortion, evan seemed to be enjoying today.

i couldn't really say the same thing about myself.

i mean, i was pretty sure that i was calm.

because otherwise evan would notice immeadietly.

i just... the lights... the noises... the fear of our fictional death...

every noise possible in the room was piling over each other in loud groans over the previous sound.

evan's sleeve.

the strap of zoe's backpack.

jared, adjusting his glasses.

the ticking of the clock.

alana's breathing.

even the colours...

the pinks and blues and greens of the neon projectors popping against the black tinted mirrors...

"our life depends on you, y/n! there's a number left! come on, seriously?" this was jared. he sounded like he was underwater.

i tried to compose myself. i knew this code pattern, i'd done it before when i was little.

i couldn't let my friends down... everyone was taking things so seriously...

tick, tick, tick...

evan's sleeve.

zoe's backpack.

jared's glasses.

alana's breathing.

tick, tick, tick...

evan uncaps his bottle from a thousand miles away...

it's so fucking loud...

tick, tick, tick...

"we have like, fifteen minutes left..." jared again.

evan sighs loudly.

"fellow agents," the robotic woman added to jared's banter, "we have fifteen minutes left to solve this case! we must get out before the enterprise explodes!"

tick, tick, tick...

"see? she totally agrees with me!" howled jared, still underwater.

"shut up, jared," said evan, his voice dangerously leveled.

they were all underwater...

the numbers in front of me on the lock started to blur.

more neon blobs...

"fellow agents, there are ten minutes left!"

"why is she so energetic about us blowing up?" asked zoe.

"no idea..." said alanna.

"hansen, if we were on an island with codes we would all be dead..."

"shut up, jared..." evan sounded both underwater and pleading.

"fourtern minutes to get that door open! would you like to use your last hint?"

"yes!" shouted jared.

"no!" yelled zoe, "no, we wouldn't! come on, n/n!"

"she's trying..." said evan quietly, making me feel a whole lot worse than he intended to.

"very well..." said the lady through the hidden speakers, "there are thirteen minutes left..."

tick, tick, tick...

"eleven minutes!"

tick, tick, tick...

"oh my god, come on!"

"i said, shut up, jared..."

tick, tick, tick...

"ten minutes to go!"

"we're literally already dead!"

"jared, seriously, shut up."

tick, tick, tick...

"you can do it n/n!"

tick, tick, tick.

"nine minutes to go!" tick, tick, tick... "oh my god... this is taking so fucking long..." tick, tick, tick... "shut up, jared..." tick... "eight minutes..." tick, tick, tick... "i give up..." tick, tick, tick, tickticktickticktick... "shut up..." hurryupshutuphurryupshutuptickticktick...

"SHUT THE FUCK UP!"

my hands shook and everything finally, finally went quiet.

the waves dragged me down.

tick, tick, tick...

"look, i'm sorry, i didn't mean to..."

"jared, seriously, shut up." this was not evan but alana this time.

tick. tick. tick. tick. tick. tick. tick. tick.

"evan, evan, i - i c - i can't - i can't - " tears began to form.

"hey. hey. talk to me..." evan wasn't faraway. everyone else still was but it was okay. "what can't you do?"

i exhaled but nothing came out.

"hey, babe. listen to me. what can't you do, beautiful girl?"

"i can't... i can't..."

he held me. evan hansen, held me.

and that made me feel a little bit safe.

"b - i can't - i don't know how - it won't - they won't let me breathe... evan... i can't breathe... the air, it's not... i can't breathe, why can't i fucking breathe!"

EVAN

i had no idea what to do. it was normally me who had an anxiety or panic attack.

she was normally the one comrorting me.

i took moment to think. just a second.

i went with what my gut told me (for once).

when my attacks were really bad y/n would hold me close.

she would whisper things in my hair and tell me it would be okay....

so that was what i did.

"hey," i said softly, trying my best not to freak out too, "you're okay. it's fine if you didn't solve it, you got most of it and that's all that matters. no, baby, don't listen to jared, he's talking bullshit..." i glared at him. "just... go to that place. remember?" when we were kids... the tent... the fairy lights you made me put..."

she nodded. thank god. thank fucking god.

"it's okay, baby, it's just a game..."

"yeah, we don't mind! it was still fun!" added zoe. alanna nodded.

"are you sure?" said y/n, still trembling but just a little bit.

"of course i'm sure," i replied softly. "i'll always be sure..."

calm was finally, finally restored. y/n cried into my shirt.

"i'm sorry..." she wiped the last of her tears with a sniff, "i'm sorry i couldn't do it... jared. guys... i'm really sorry..."

an explosion went off over the speakers.

"nah, it was my fault, remember? i took forever to figure out the hidden number in the css code... zoe rolled her eyes. "besides. who cares! we had fun!"

"you didn't do anything wrong..." i whispered. "i love you..." fuck, i loved her so much...

"i love you too..."

"get a room!"

so as you can probably tell deh is my new obsession (i'm reading the book and listening to the soundtrack) so requests for evan are open and i'll make a spot on my masterlist.

MASTERLIST

[melxxxn]

Here’s a long masterpost of some resources I use and may be of help for you :) You can find all of this on my +resources page just in case you can’t find this post (will be updating the page as I find new sites!)

Some of these sites have premium and free content!

Favorites - ❥

Note that I’m not a professional designer nor a theme maker, this is some of the ones I use and a few recommendations from other tumblr users. 

In this masterpost you’ll find:

Inspiration sites

Fonts (Typeface)

Icons

Palettes

Programs to download like Photoshops, Illustrator, etc...

Sites with Freebies

Free Image sites

Coding courses and other courses sites

Other tools

Inspiration

❥ Behance

Dribbble

Awwwards

Designspiration

Fonts (Typeface)

❥ Google Fonts

❥ WhatFont Chrome Extension

❥ Adobe Fonts

❥ Dafont

❥ Zetafonts

Awwwards Free Fonts

❥ Rostype

Font Squirrel

❥ Behance

Gumroad

Font Recomendations

Korean Fonts

❥ Naver Fonts

❥ noonnu

Google fonts

hangeul-naver

Icons

❥ honeybee icon font by @suiomi

❥ feathericons

❥ flaticon

dripicons

linearicons

font awesome

material design

❥ noun project

❥ My Behance collection

❥ Behance

Palettes

❥ coolors

❥ palette world

❥ colorable

❥ color space

0to255

color hunt

❥ royals palettes

❥ seoul palette

colorglot

❥ colormind

flat ui colors

colorspillz 

❥ color tool

the color system

Programs

❥ Adobe Creative Cloud post by @suiomi

❥ Vegas Pro 17

❥ Procreate

❥ Invision studio

Sketch

Images

❥ unsplash

pexels

freephotos

Coding

❥ free frontend

❥ ATOM text editor post by @themesbytommy​

❥ css hover effects

❥ Tutorials by @octomoosey

❥ Resources by @glenthemes

❥ chrome extensions

Freebies

❥ Behance

❥ graphic design freebies

❥ freebiesbug

❥ Dribbble & Behance Freebies (DBF)

graphic panda

❥ vera block

365psd

designermill

❥ psdrepo

sketch app sources

medialoot

❥ logodust

❥ freeminimallogos

hey design

epicpxls

web design freebies

❥ free design resources

designmodo

design cuts

❥ design-freebies

❥ ls.graphics

❥ dreamstale

graphic google

❥ free mockups

design freebie reddit

Premium Sites

Creative Market

Graphic Pear

Coding Courses

❥ freecodecamp

❥ codecademy

❥ w3schools

❥ grasshopper mobile app

❥ a more indepth post by @suiomi 

Other Courses Sites

Coursera

edx

Amazing Resource Blogs

@yeahps 

@theme-hunter

Other tools

❥ Lorem Ipsum

video to gif

❥ svg to png

❥ color hex

hex2rba

❥ blob maker

hero patterns

symbols

This is all I have so far, if you have any other suggestion or have any questions read my faq’s page or send me an ask :) My commissions are open right now so check my work or refer to my +commission page.

And here you can see my work:

Art

Graphic Design

Tumblr Themes Design

Shop

[cssmonster]

Explore 24 Dynamic CSS Blob Effects

Dive into a carefully curated collection of free HTML and CSS blob effect code examples sourced from Codepen, GitHub, and other reputable resources. This November 2021 update brings 9 exciting new additions to help you infuse your web design with unique and eye-catching blob effects. Discover, customize, and enhance your website's visual appeal with these captivating animations. Related Articles: - Explore 15+ Interactive CSS Bubbles for Your Web Projects Author Temani Afif April 8, 2022 Links Demo and Code Download Made with HTML / CSS About a Code CSS Blob Checkbox Dive into the world of CSS blob effects with this singular animation detail. Explore how to create a dynamic and eye-catching blob checkbox using CSS, adding a unique touch to your web design effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Fabrizio Calderan March 22, 2022 Links Demo and Code Download Made with HTML / CSS About a Code Blob Effect Immerse your web design with a captivating blob effect, a singular animation detail that adds a dynamic and eye-catching touch to your website. Explore the creative potential of blob animations for a unique visual experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: Yes Dependencies: - Author Temani Afif January 6, 2022 Links Demo and Code Download Made with HTML / CSS About a Code The Blob II Step into the world of "The Blob II," a singular animation detail that brings a unique and dynamic element to your web design. Explore the creativity and innovation behind this captivating web animation. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author NANOUU December 16, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Drop Experience the magic of "Drop," a singular animation detail that adds depth and intrigue to your web design. Explore the creative possibilities of this captivating visual element. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author TheDevEnv December 8, 2021 Links Demo and Code Download Made with HTML / CSS About a Code CSS Blob Animation and Glassmorphism Explore the fascinating combination of blob animation and glassmorphism achieved with CSS. Dive into this singular animation detail to add a dynamic and sleek visual element to your web design effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Jon Kantner September 29, 2021 Links Demo and Code Download Made with HTML / CSS About a Code RGB Blob Preloader Experience the mesmerizing RGB Blob Preloader, a singular animation detail that enhances your web design with dynamic visual appeal. Explore how this creative element adds a unique touch to your website's loading process, captivating your audience from the start. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Temani Afif June 25, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Pure CSS Blob Effect with Zero HTML Elements Discover the enchanting world of a pure CSS blob effect created without a single HTML element. Dive into this singular animation detail and elevate your web design with dynamic and eye-catching visuals, all achieved with the power of CSS alone. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Shrinath Prabhu May 19, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Animated Blobs Immerse your web design with the magic of animated blobs, a singular animation detail that adds dynamic and eye-catching visual effects. Explore the creative possibilities of blob animations for a unique web experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Colleen Lohr March 4, 2021 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code Animated Neumorphism Blob Checkbox Explore a unique experiment with checkboxes, where version one showcases a simple reveal animation upon check to unveil the captivating animated blob. Immerse your web design in the innovative world of neumorphism with this singular animation detail. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Adam Dipinto November 29, 2019 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code Social Card Hover Elevate your web design with the "Social Card Hover," a singular animation detail that adds an interactive and engaging element to your website's social media cards. Explore the magic of hover effects for a captivating user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Juan Pablo February 27, 2019 Links Demo and Code Download Made with HTML / CSS About a Code Blobs, Grids, and Viewport Units Explore a fascinating demo showcasing the explicit placement of blobs on a grid using viewport units. Dive into this singular animation detail and learn how to create dynamic web layouts that captivate your audience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Amli February 25, 2019 Links Demo and Code Download Made with HTML / CSS About a Code CSS Animated Blobs Text in Multiple Colors Elevate your text design with animated blobs created solely with CSS. Explore this singular animation detail that adds a splash of creativity and dynamic color to your web content effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Jhey February 24, 2019 Links Demo and Code Download Made with HTML (Pug) / CSS (Stylus) About a Code Randomly Generated CSS Lava Lamp Dive into the world of the "Randomly Generated CSS Lava Lamp," where blob characteristics are uniquely crafted on each load using random CSS variables. Experience a different and captivating lamp with every visit, adding dynamic flair to your web design effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Mark February 20, 2019 Links Demo and Code Download Made with HTML (Pug) / CSS (SCSS) About a Code Blended Photo & Gradient Blob Animation Immerse your web design with a mesmerizing animation that combines blended photos and gradient blobs. This singular animation detail, created with border-radius and Unsplash images using SCSS and Pug, adds a dynamic and captivating touch to your website's visuals. Explore the creative possibilities of this unique animation. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Leena Lavanya February 20, 2019 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code Animated Blobby Gooey Button Discover the magic of an animated blobby gooey button, a singular animation detail that injects playful and interactive elements into your web design. Dive into this captivating button experience and explore its creative potential for enhancing user engagement. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author sasi jj February 19, 2019 Links Demo and Code Download Made with HTML / CSS About a Code Dashing Blob Ball Experience the excitement of the "Dashing Blob Ball," a singular animation detail that adds a dynamic and eye-catching element to your web design. Dive into the world of creativity with this captivating web animation. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author MARK February 19, 2019 Links Demo and Code Download Made with HTML (Pug) / CSS (SCSS) / JavaScript About a Code Animated Blob Cursor Elevate user engagement with an animated blob cursor, a singular animation detail that adds a dynamic and interactive element to your web design. Explore how to create this eye-catching feature for a unique browsing experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Kari Sabine Malmin February 13, 2019 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code Border Radius Blob Discover the fascinating world of the Border Radius Blob, a singular animation detail that uses CSS properties to create a captivating and visually appealing blob effect. Explore how to implement this creative element into your web design effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Monica Dinculescu January 23, 2019 Links Demo and Code Download Made with HTML / CSS About a Code CSS Morphing Blob Experience the mesmerizing world of a CSS-only morphing blob, a singular animation detail that transforms and captivates your web design effortlessly. Explore the magic of dynamic shapes and fluidity in web animations. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Piotr Galor October 15, 2018 Links Demo and Code Download Made with HTML / CSS About a Code Pure CSS Gooey Morph Experience the magic of a pure CSS gooey morph, where SVG is not involved. This singular animation detail primarily animates border-radius, with added effects like opacity and basic transforms, enhancing your web design with captivating visual flair. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Adam Kuhn June 5, 2018 Links Demo and Code Download Made with HTML (Haml) / CSS (SCSS) About a Code Pure CSS Blob Card UI Immerse your web design in creativity with these pure CSS cards featuring a captivating blob effect. Explore this singular animation detail and learn how to enhance your website's visual appeal effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Cassie Evans April 4, 2018 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code CSS/SVG Blobby Background Discover the magic of a singular CSS/SVG blobby background, created by harnessing SVG filters and masks for animation. Dive into the world of creative web design with this captivating animation detail, adding an eye-catching visual element to your website. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Cassie Evans April 4, 2018 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code CSS/SVG Blobby Background Discover the magic of a singular CSS/SVG blobby background, created by harnessing SVG filters and masks for animation. Dive into the world of creative web design with this captivating animation detail, adding an eye-catching visual element to your website. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Marjo Sobrecaray April 17, 2017 Links Demo and Code Download Made with HTML / CSS (SCSS) / JavaScript About a Code Draggable Blob with Sass Take a deep dive into the world of draggable blobs created using Sass collections. This singular animation detail is an experiment in dynamic animations, adding interactivity and creativity to your web design effortlessly. Explore the possibilities of interactive blobs on your website. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Marcos Silva February 13, 2017 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code CSS-Only Blob Animation Immerse your web design with a mesmerizing CSS-only blob animation, a singular animation detail that adds dynamic flair to your website effortlessly. Explore the creative possibilities of this unique visual effect for an engaging user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Read the full article

[ineffablefool]

How to center and nice-size an image in an AO3 fic using a work skin

Maybe someone can use this?  In my fic for the DIWS Good Omens Mini Bang, I embedded some images from my wonderful illustrator.  The centered images will never be wider than the text, no matter the screen size, but they also are never stretched larger than their native size (I resized ‘em to 800px wide in my trusty paint program for faster downloading). Here’s how one looks on my giant monitor and on my phone screen:

If you have never done AO3 skins before then I promise they are not actually scary!  You have the option of doing relatively complicated things with them, but this thing is simple.

Anyway this is how I center my images.

Step one: make a skin.

In your AO3 dashboard, click “Skins” in the menu (left or top of page, depending on if you’re on a big or small screen).  This takes you to the Site Skins page, which are for if you want to make all of AO3 look different to just you.  You want a Work Skin, though, which makes your fic look different to everyone, so click My Work Skins.

Click Create Work Skin in the top right and you’ll get an editor that’s similar to when you’re posting a fic!  You only need to set two things.  One, give it a title that makes sense to you (the title won’t be visible to people reading your fic).  Two, paste some stuff into the big “CSS” box.

This is the stuff to paste:

.centered {  margin-left: auto;  margin-right: auto;  text-align: center; }

.centered img {  max-width: 100% !important; }

That was the stuff to paste!  Just toss both of those two blobs in the big editor and click Submit.  Now you have a skin!

Step two: use the skin in your work.

Open up the work you want to do this in.  Find the Select Work Skin box (just under the Choose A Language box) and select the skin you just made.  Yay!  Sorry, the Homestuck and Undertale ones are just there for everyone and that’s how it is.  (Nothing against Homestuck or Undertale.  I just don’t like unneeded entries in lists.)

Step three: center your image.

This is the most complicated bit, only because I can’t give you an exact thing to copy-paste.  But I can give you a basic template!  Don’t try to paste this into Word or a similar word processing program.  The quote marks could get turned into “smart quotes” (like the ones I typed there, just now -- see how the opening and closing quotes are different from each other?).  If you need to save it off for later, Notepad or another very simple plain-text editor will be perfect, because it will keep the quotes as not smart quotes.

Find the spot in your AO3 work where you want the centered image to be.  It would be between two blocks of text which are wrapped with <p> tags, so something like this...

Into that space, you’re gonna hit Enter a couple of times (which I’ve already done in the screenshot) and then paste this block:

<p class="centered">  <img src="BANANA" alt="ORANGE" /> </p>

That was the block to paste.  Before you’re done, you need to change two things!

BANANA goes away.  Inside the quote marks where BANANA used to be, you need to put the URL of your image.  This URL must start with http or https (preferably https), or else it won’t work.  I can’t give specific instructions on how to get this, because it depends on where the image is hosted!  If it’s only on your computer, or attached to an email, it can’t be embedded.  It has to have been put somewhere on the web, like Flickr, Photobucket, or Google Drive.  It will work to embed from Tumblr, but I don’t trust Tumblr not to change everything up and bork all the old image URLs, thus breaking your embedded images on an arbitrary date in the future.  (Any image host could theoretically do this, but -- well.  We’re all familiar with Tumblr, right?)

ORANGE also goes away.  Inside the quote marks where ORANGE used to be, you optionally can (I recommend you do!) put a brief (200 characters or fewer) description of the image.  This is text which is invisible when viewing your fic in a normal browser -- it’s there for screen reader technologies, used by people who are blind or otherwise have trouble seeing a screen.  Their screen reader software will literally read out to them, so that they can hear it with their human ears, the description you put here.  Don’t start it with “image of” or “picture of”, because the screen reader tells the human that it’s an image already.  Here is a pretty user-friendly guide on how to write alt text!  If you’re more technically-inclined, the W3C has more involved docs.  Remember, the screen reader is going to say out loud whatever you put here, so don’t make it super long, or else you’ll force people who are using screen readers to wait through the long description for your story to continue. 

A finished version of the banana/orange block might look like this:

<p class="centered">  <img src="https://www.my-nifty-example-website.com/prettypicture.jpg" alt="Two dogs having a tea party wearing fancy hats" /> </p>

Step four: do it again if needed.

If you have more images to center in the same work, just repeat step 3 for each!  Step 2 has to be done once per work.  Step 1 might be done once ever (and then you just keep pulling that same skin into many works), or you might do it multiple times (if you want other changes in the skin that are special to only this one work).  I do a different skin every time I have a fic that needs a skin, but that’s because I do extra fancy things that are different for each fic.

You never have to do either step 1 or step 2 more than once per work, even if it’s multi-chapter.  In future chapters of the same fic, just do step 3 again.

Step five: preview and/or temporary draft is your friend

I am an IT professional with a (technically expired but work with me here) Microsoft certification in HTML5/CSS and seven years of writing this stuff for pay under my belt.  Even I don’t post without previewing.  Preview and saving as a draft without publishing are both your friends.

Some fun(?) notes

What you are doing here is using cascading style sheets.  The AO3 skin is a very simple stylesheet, which is a series of rules that your readers’ browsers will use to apply to text in your story.  There are standards that all your normal sort of browsers (Firefox, Chrome, Safari, Edge, Opera...) are supposed to follow when they see these rules, so that no matter which browser someone uses, a webpage will look as similar as possible.

A skin created from the above steps defines a class named “centered” and tells the browser how “centered” should look.  Then, in your fic, if you apply the class named “centered” to something in the big editor -- like, say, the <p>aragraph tag that wraps around your image -- then the style from your skin will be applied. 

The magic of cascading style sheets is that you can define your class exactly once and then use it many times.  If you decide you want to change all the places you used it -- maybe you want every centered image in your 87-chapters-long heavily-illustrated fic to have a green border? -- you have to change exactly one place: your skin.  The change will bubble down to every single place you used it.

Skins do not allow all the features of true CSS (no media queries; I am sad), and you can’t put comments in your skin (the editor strips them out).  Browser-specific overrides also do not work (if you don’t know what this means, that’s okay, you have to go to extra work to try to use them in the first place).  But they’re still pretty cool.

A lot of people will just put <center> tags around their thing, and use width=“100%” or some other number, but that is technically not standard HTML, hasn’t been for a very long time, and sooner or later Chrome is going to get clever and stop respecting it.  (Google’s developers like to make Chrome very clever and change how it does things just because they feel like it.  It makes my day job rather more difficult.  Ask me about SameSite cookies!! Actually, don’t.  Never ask me about that thing.)

For portrait-oriented illustrations -- taller than they are wide -- I like to float the image to the right of the text and have it take up no more than 50% of the width of the screen (as seen near the end of this chapter).  But that is a more complicated thing than this one, and I am keeping it simple today.  Maybe I’ll show how to do the nice floaty at some point.

For any-oriented illustrations, you could have a small resized version which links out to a larger version as a click-to-zoom thing.  That is also a little more complicated, so it isn’t in this post.

Questions and clarifications welcome.

That is how to center and nice-size an image in an AO3 fic using a work skin!  I hope you are having a good day.